快速开始

您所在的位置：网站首页 › 编辑 editor › 快速开始

快速开始

#快速开始 | 来源: 网络整理| 查看: 265

# 快速开始

快速了解可查看视频教程。用于 Vue React 参考这里。

# 创建空白编辑器

可直接参考 demo 示例open in new window的网页源码。

# 引入 CSS 定义样式

可自定义编辑器、工具栏的尺寸、边框、z-index 等样式。

#editor—wrapper { border: 1px solid #ccc; z-index: 100; /* 按需定义 */ } #toolbar-container { border-bottom: 1px solid #ccc; } #editor-container { height: 500px; } 123456789# 定义 HTML 结构 1234

TIP

如果想要“全屏”功能，则要求工具栏、编辑器 DOM 节点必须是同一层级当然，工具栏、编辑器 DOM 节点也可自由组合，例如仿腾讯文档 demoopen in new window# 引入 JS 创建编辑器 const { createEditor, createToolbar } = window.wangEditor const editorConfig = { placeholder: 'Type here...', onChange(editor) { const html = editor.getHtml() console.log('editor content', html) // 也可以同步到 } } const editor = createEditor({ selector: '#editor-container', html: '

', config: editorConfig, mode: 'default', // or 'simple' }) const toolbarConfig = {} const toolbar = createToolbar({ editor, selector: '#toolbar-container', config: toolbarConfig, mode: 'default', // or 'simple' }) 1234567891011121314151617181920212223242526272829

TIP

不同 mode 可参考 demo

mode: 'default'open in new window 默认模式 - 集成了 wangEditor 所有功能mode: 'simple'open in new window 简洁模式 - 仅有部分常见功能，但更加简洁易用

这样就创建出了一个最基本的编辑器。

# 接下来

要实现一个完整的富文本编辑器功能，你可能还需要以下功能：

内容处理 - 获取内容，设置内容，展示内容工具栏配置 - 插入新菜单，屏蔽某个菜单等编辑器配置 - 兼听各个生命周期，自定义粘贴菜单配置 - 配置颜色、字体、字号、链接校验、上传图片、上传视频等编辑器 API - 控制编辑器内容和选区扩展新功能 - 扩展菜单、元素、插件等Last Updated: Contributors: 王福朋

【本文地址】

快速开始

快速开始

今日新闻

推荐新闻